<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>

<body>

    <div class="layui-input-block">
        <button type="button" class="layui-btn layui-btn-normal" id="request-create"
          onclick="createShip()">增加</button>
        <button type="button" class="layui-btn layui-btn-normal" id="request-delete"
          onclick="deleteShip()">删除</button>
        <button type="button" class="layui-btn layui-btn-normal" id="request-update"
          onclick="updateShip()">修改</button>
        <button type="button" class="layui-btn layui-btn-normal" id="request-query"
          onclick="queryShip()">查询</button>
      </div>

    <script type="text/javascript">
      //查询船只
      function queryShip() {
        //查询这只船
        $.ajax({
          // url
          url: 'http://124.223.106.40:7000/api/6218aac44b109235cca953f7/Ships/6218d294f956649bd00f45da',
          // 参数
          //data: { a: 100, b: 200 },
          // 请求类型
          type: 'GET',
          // 响应体结果
          dataType: 'json',
          // 成功的回调
          success: function (data) {
            console.log(data);
            console.log(data.name)
            //查到后应该用查到的数据来填充数组
          },
          // 超时时间
          //timeout: 2000,
          // 失败的回调
          error: function () { console.log('出错拉~'); }

        })
      }
      //添加船只
      function createShip() {

        var testCreateDate = {
          "name": "ship-6",
          "description": "ajax增加一个船只",
          "properties": {
            "dataProperty": {
              "lonLatHeightDatas": [
                {
                  "x": 0,
                  "y": 0
                }
              ]
            },
            "displayProperty": {
              "fontElement": {
                "showProperty": true,
                "fontName": "string",
                "fontSize": 0,
                "fontColor": {
                  "r": 1,
                  "g": 1,
                  "b": 1,
                  "a": 1
                }
              },
              "d2ModelElement": {
                "modelUrl": "string",
                "modelScale": 0
              },
              "d3ModelElement": {
                "modelUrl": "string",
                "modelScale": 0
              },
              "lineProperty": {
                "showProperty": true,
                "lineStyle": "string",
                "lineWidth": 0,
                "lineColor": {
                  "r": 1,
                  "g": 1,
                  "b": 1,
                  "a": 1
                }
              }
            },
            "workStateProperty": {
              "workTimeData": [
                {
                  "startTime": "2022-03-01T02:02:55.267Z",
                  "endTime": "2022-03-01T02:02:55.267Z"
                }
              ]
            }
          }
        }

        $.ajax({
          // url
          url: 'http://124.223.106.40:7000/api/6218aac44b109235cca953f7/Ships',
          // 参数
          data: testCreateDate,
          // 请求类型
          type: 'POST',
          // 响应体结果
          dataType: 'json',
          // 成功的回调
          success: function (data) { console.log(data); },
          // 失败的回调
          error: function () { console.log('出错拉~'); },
        })
      }
      //更新船只
      function updateShip() {
        var testUpdateDate = {
          "name": "string",
          "description": "更新船只",
          "properties": {
            "dataProperty": {
              "lonLatHeightDatas": [
                {
                  "x": 0,
                  "y": 0
                }
              ]
            },
            "displayProperty": {
              "fontElement": {
                "showProperty": true,
                "fontName": "string",
                "fontSize": 0,
                "fontColor": {
                  "r": 1,
                  "g": 1,
                  "b": 1,
                  "a": 1
                }
              },
              "d2ModelElement": {
                "modelUrl": "string",
                "modelScale": 0
              },
              "d3ModelElement": {
                "modelUrl": "string",
                "modelScale": 0
              },
              "lineProperty": {
                "showProperty": true,
                "lineStyle": "string",
                "lineWidth": 0,
                "lineColor": {
                  "r": 1,
                  "g": 1,
                  "b": 1,
                  "a": 1
                }
              }
            },
            "workStateProperty": {
              "workTimeData": [
                {
                  "startTime": "2022-03-01T12:41:29.745Z",
                  "endTime": "2022-03-01T12:41:29.745Z"
                }
              ]
            }
          }
        }
        $.ajax({
          // url
          url: 'http://124.223.106.40:7000/api/6218aac44b109235cca953f7/Ships?Id=621d80a71531695bd871cab4',
          // 参数
          data: testUpdateDate,
          // 请求类型
          type: 'PUT',
          // 响应体结果
          dataType: 'json',
          // 成功的回调
          success: function (data) { console.log(data); },
          // 失败的回调
          error: function () { console.log('出错拉~'); },
        })
      }
      //删除船只
      function deleteShip(){ 
          $.ajax({
          // url
          url: 'http://124.223.106.40:7000/api/6218aac44b109235cca953f7/Ships/621d80a71531695bd871cab4',
          // 请求类型
          type: 'DELETE',
          // 响应体结果
          dataType: 'json',
          // 成功的回调
          success: function (data) { console.log(data); },
          // 失败的回调
          error: function () { console.log('出错拉~'); },
        })
      }

    </script>

</body>

</html>